import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  Modal,
  ActivityIndicator,
  TouchableOpacity,
  Image,
} from "react-native";
// import CustomImage from "../CustomImage";
import ImageViewer from "react-native-image-zoom-viewer";
import { fileWeb } from "../../api/query";
// import { ChildernContext } from "../../context/preparation/ChildernContext";

const Loading = () => {
  return (
    <View>
      <ActivityIndicator animating={true} size={"large"} />
    </View>
  );
};

const Article = ({ article }) => {
  const [visible, setVisible] = useState(false);
  const [currentImageIndex, setCurrentImageIndex] = useState(0);

  let images = [];
  article.contents.map((item) => {
    if (item.type === 2 && item.content._id !== undefined) {
      images.push({ url: fileWeb + "/" + item.content.filePath });
    } else if (item.type === 2) {
      images.push({ url: item.content.uri });
    }
  });

  return (
    <View style={styles.page}>
      <ScrollView style={styles.container}>
        <View style={styles.main}>
          <View style={styles.title}>
            <Text style={styles.text}>{article.title}</Text>
            <Text style={styles.time}>{article.time}</Text>
          </View>
          <View style={styles.content}>
            {article.contents.map((item, index) => {
              if (item.type == 0) {
                //副标题
                return (
                  <Text key={index} style={styles.subtitle}>
                    {item.content}
                  </Text>
                );
              } else if (item.type == 1) {
                //段落
                return (
                  <Text key={index}>
                    &emsp;&emsp;&emsp;&emsp;
                    {item.content}
                  </Text>
                );
              } else {
                //图片
                if (item.content._id !== undefined) {
                  return (
                    <TouchableOpacity
                      key={index}
                      onPress={() => {
                        let index = images.findIndex((t_item) => {
                          return (
                            t_item.url === fileWeb + "/" + item.content.filePath
                          );
                        });

                        setCurrentImageIndex(index);
                        setVisible(true);
                      }}
                      style={{ margin: 10 }}
                    >
                      <Image
                        source={{ uri: fileWeb + "/" + item.content.filePath }}
                        style={{
                          width: "100%",
                          height: 200,
                          resizeMode: "contain",
                        }}
                      />
                    </TouchableOpacity>
                  );
                } else {
                  return (
                    <TouchableOpacity
                      key={index}
                      onPress={() => {
                        let index = images.findIndex(
                          (t_item) => t_item.url === item.content.uri
                        );
                        setCurrentImageIndex(index);
                        setVisible(true);
                      }}
                      style={{
                        margin: 10,
                      }}
                    >
                      <Image
                        source={{ uri: item.content.uri }}
                        style={{
                          width: "100%",
                          height: 200,
                          resizeMode: "contain",
                        }}
                      />
                    </TouchableOpacity>
                  );
                }
              }
            })}
          </View>
        </View>
      </ScrollView>

      <Modal visible={visible} animationType={"fade"}>
        <ImageViewer
          imageUrls={images}
          saveToLocalByLongPress={false}
          // menuContext={{ saveToLocal: "保存图片", cancel: "取消" }}
          index={currentImageIndex} //初始显示第几张
          loadingRender={Loading}
          onClick={() => {
            setVisible(false);
          }}
        />
      </Modal>
    </View>
  );
};

var styles = StyleSheet.create({
  page: {
    // marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    height: "100%",
    backgroundColor: "white",
  },
  container: {
    flex: 1,
    padding: 16,
  },
  main: {
    flex: 1,
    backgroundColor: "#f9f9f9",
  },
  title: {
    marginVertical: 12,
  },
  time: {
    textAlign: "right",
    fontSize: 12,
    marginRight: 16,
    color: "#5a5a5a",
  },
  text: {
    fontSize: 20,
    textAlign: "center",
  },
  content: {
    // justifyContent: "center",
    // alignItems: "center",
    marginBottom: 16,
  },
  subtitle: {
    fontSize: 16,
    textAlign: "left",
    marginVertical: 5,
  },
});

export default Article;
